<template>
  <el-form ref="refForm" :model="formData" label-position="top">
    <el-form-item label="模版名称">
      {{ modelData.name }}
    </el-form-item>
    <el-form-item label="模版KEY">
      {{ modelData.key }}
    </el-form-item>
    <el-form-item label="业务模型">
      {{ modelData.modelName }}
    </el-form-item>
    <el-form-item label="业务服务">
      <el-select
        v-model="formData.serviceKey"
        placeholder="请选择业务服务"
        style="width: 100%"
        @change="(val) => handelChange(val)"
      >
        <el-option
          :value="i.key"
          :label="`${i.name} （${i.key}）`"
          v-for="(i, index) in serviceList"
          :key="index"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
import { cloneDeep } from "lodash"
import { getHmhttprequestdefinitionList } from "@/apis/paas/HmHttpRequestDefinitionController.js"
export default {
  name: "GlobalConfig",
  props: {
    modelCode: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      modelData: {},
      formData: {},
      serviceList: [], // 业务服务
    }
  },
  methods: {
    init(data) {
      this.formData = {}
      this.modelData = cloneDeep(data)
      this.$set(this.formData, "serviceKey", data.serviceKey)
      this.getServiceList()
    },
    async getServiceList() {
      if (!this.modelCode) return
      this.serviceList = await getHmhttprequestdefinitionList({
        modelCode: this.modelCode,
      })
    },

    handelChange(val) {
      this.$emit("changeData", { serviceKey: val, type: 1 })
    },
  },
}
</script>
